<template>
	<view class="">
		<view class="topTop">
			<view class="search">
				<view class="search-input">
					<view class="search-flex">
						<input class="search-input_input" type="text" @focus="inputfocus" @input="changeInput" v-model="keyword" confirm-type="搜索" placeholder-class="place" placeholder="儿童加绒外套49.9" />
						<i class="icon error_icon" v-if="keyword" @tap="clear"> &#xe66f; </i>
					</view>
					<text @tap="searchnav(keyword)" class="search-close" v-if="searchCon == 0">搜索</text>
					<view v-else class="search-cart" @tap="searchCart"><text v-if="cartNo.list.length">{{cartNo.list.length}}</text></view>
				</view>
			</view>
			<view v-if="searchCon == 0" class="search-content">
				<view class="search-list" v-if="keyword">
					<view class="search-list_text" v-for="(item,index) in searchInputList" :key="index" @tap="searchnav(item)">
						<!-- <text v-if="item.index == 14">实打实打扫打扫打扫的1</text> -->
						<text>{{item}}</text>
					</view>
				</view>
				<view v-else>
					<view class="search-list_all" v-if="searchList.length">
						<view class="search-list_history">
							<view class="search-list_img">
								<image :src="Url+'index/ic-s_date.png'"></image>
								<text>历史搜索</text>
							</view>
							<image class="search-list_del" mode="widthFix" :src="Url+'index/ic-del.png'" @tap="del"></image>
						</view>
						<view class="search-list_array">
							<text v-for="(item,index) in searchList" :key="index" @tap="searchnav(item.content)">{{item.content}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 导航 -->
			<view class="nav" v-if="searchCon == 1">
				<view :class="['nav_item', navindex == index? 'nav_item_item': '']" @tap="changenav(index)" v-for="(item, index) in navlist" :key="index">
					{{item.title}}
					<view class="" v-if="navindex == 2 && item.title == '价格'">
						<view class="p-box">
							<image v-if="priceOrder === 0 && navindex != 2" :src="Url+'add_images/price-ud.png'" mode="widthFix"></image>
							<image v-if="priceOrder === 1 && navindex === 2" :src="Url+'add_images/price-up.png'" mode="widthFix"></image>
							<image v-if="priceOrder === 2 && navindex === 2" :src="Url+'add_images/price-down.png'" mode="widthFix"></image>
							<!-- <text :class="{active: priceOrder === 1 && navindex === 2}" class="icon-shang"></text>
							<text :class="{active: priceOrder === 2 && navindex === 2}" class="icon-shang xia"></text> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true"  class="product-Con" :style="{height:searchHeight+'px'}" v-if="searchCon == 1" @scrolltolower="scrollXia">
			<view v-if="productList.length">
				<product-two @toproductdetail="toproductdetail" :productList="productList"></product-two>
				<uni-load-more :loadingType="loadingType" :contentText="contentText"></uni-load-more>
			</view>
			<sc-no v-else url="add_images/no-search.png" width="30%" nofont="暂无搜索结果"></sc-no>
		</scroll-view>
		<sc-home></sc-home>
	</view>
</template>

<script>
	import productTwo from '@/components/classify/productwo.vue';
	import {searchGoods,search,searchInput,delHistory,addHistory} from '@/common/index.js';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	var timer = null;
	export default {
		components: {
			productTwo,uniLoadMore
		},
		data() {
			return {
				Url:this.Imgurl,
				left_navindex: -1,
				search_content: '',
				arrangeflag: true,
				navigitionOne: '',
				navigitionTwo: '',
				listBoxFlag: false,
				drawFlag: false,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				navlist: [{
						title: '综合',
						pic1: '../../static/image/mine/index/classify01.png',
						pic2: '../../static/image/mine/index/classify11.png'
					},
					{
						title: '销量',
						pic1: '../../static/image/mine/index/classify01.png',
						pic2: '../../static/image/mine/index/classify11.png'
					},
					{
						title: '价格',
						pic1: '../../static/image/mine/index/classify02.png',
						pic2: '../../static/image/mine/index/classify12.png'
					},
				],
				navindex: 0,
				productList: [],
				searchHeight:0,
				keyword:'',
				searchCon:1,
				searchList:[],
				searchInputList:[],
				loadingType: 0,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
					contentdown:'上拉加载更多',
					contentrefresh: '正在加载...',
					contentnomore: '到底了~',
				},
				page:1,
				limit:10,
				last_page:1
			}
		},
		computed:{
			...mapState({
				cartList: ({ cart }) => cart.cartList,
				allSel: ({ cart }) => cart.allSelected
			}),
			cartNo(){
				let nolist = [],
				    list = [];
			    const {cartList} = this;
				cartList.forEach((i,n)=>{
					// console.log(i)
					if(i.stock){
						list.push(i)
					}else{
						nolist.push(i)
					}
				})
				return {nolist,list};
			}
		},
		onPullDownRefresh() {
			//下拉刷新的时候请求一次数据
			this.page = 1;
		    this.getData();
		},
		//触底
		onReachBottom() {
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(()=> {
				this.getmoreNews();
			}, 1000);
		},
		onLoad(options) {
			this.keyword = options.name
			// this.navigitionOne = options.navid
			// this.navigitionTwo = options.productid
			// console.log(this.navigitionTwo);
			this.search()
			this.getData()
			// if(options.name){
			// 	this.getData()
			// 	this.searchCon = 1;
			// }
		},
		mounted() {
			if(this.keyword){
			   this.getSys()	
			}
		},
		methods: {
			scrollXia(){
				if (timer != null) {
					clearTimeout(timer);
				}
				timer = setTimeout(()=> {
					this.getmoreNews();
				}, 1000);
			},
			searchCart(){
				uni.switchTab({
					url:'/pages/shoopingCart/cart'
				})
			},
			inputfocus(){
				this.changeInput()
			},
			del(){
				delHistory().then(res=>{
					if(res.code == 1){
						this.searchList = [];
					}
				}).catch()
			},
			getSys(){
				let that = this;
				uni.getSystemInfo({
				    success: function (res) {
						const query = uni.createSelectorQuery()
						query.select('.topTop').boundingClientRect(data => {
							that.searchHeight = res.windowHeight - data.height;
							// uni.setStorageSync('searchHeight',data.height)
						}).exec();
				    }
				});
			},
			searchnav(item){
				// console.log(item)
				// if(!item){
				// 	return false
				// }
				this.page = 1;
				this.keyword = item ? item : '';
				this.productList = [];
				addHistory({content:item ? item : ''}).then(res=>{
					if(res.code == 1){
						
					}
				}).catch()
				this.searchCon = 1;
				this.getData()
				this.search()
			},
			search(){
				search().then(res=>{
					if(res.code == 1){
						this.searchList = res.msg;
					}
				}).catch()
			},
			changeInput(){
				if(this.keyword){
				   searchInput({name:this.keyword}).then(res=>{
				   	if(res.code == 1){
				   		this.searchInputList = res.msg;
				   		this.searchCon = 0
				   	}
				   }).catch()	
				}
			},
			getData(){
				const {keyword,page,priceOrder,navindex} = this;
				let params = {
					keyWord:keyword,
					page
				}
				if(navindex == 1){
					params['sales'] = navindex
				}
				if(priceOrder){
					params['price'] = priceOrder
				}
				searchGoods(params).then(res=>{
					if(res.code == 1){
						const item = res.msg;
						if(item.data.length>0){
							this.productList = item.data;
							this.loadingType = item.last_page > 1 ? 0 : 2;
							this.page++;
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();//得到数据后停止下拉刷新
											this.getSys()
						}else{
						    this.productList = []
							uni.hideNavigationBarLoading();
							uni.stopPullDownRefresh();
						}
					}
				}).catch()
			},
			getmoreNews(){
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				const {keyword,page,priceOrder,navindex} = this;
				let params = {
					keyWord:keyword,
					page
				}
				if(navindex == 1){
					params['sales'] = navindex
				}
				if(priceOrder){
					params['price'] = priceOrder
				}
				searchGoods(params).then(res=>{
					if(res.code == 1){
						const item = res.msg;
						if(item.data.length>0){
							this.productList = this.productList.concat(item.data);
							this.loadingType = item.last_page > 1 ? 0 : 2;
							this.page++;
							uni.hideNavigationBarLoading();
						}else{
							this.loadingType = 2;
							uni.hideNavigationBarLoading();
						}
					}
				}).catch()
			},
			searchTap() {
				// uni.navigateTo({
				// 	url: '/pageA/search/search'
				// })
			},
			oneclassify(index) {
				if (this.left_navindex == index) {
					this.left_navindex = -1
				} else {
					this.left_navindex = index
				}
			},
			// 抽屉导航跳转
			toNavigition(index, key) {
				uni.redirectTo({
					url: '/pageB/classify/procudt?navid=' + index + '&productid=' + key
				})
			},
			// 清空搜索框内容
			clear() {
				this.keyword = '';
				this.searchCon = 0
			},
			changenav(index) {
				this.navindex = index
				if (index == 2) {
					this.priceOrder = this.priceOrder == 1 ? 2 : 1
				}else{
					this.priceOrder = 0;
				}
				this.page = 1;
				this.getData();
			},
			toproductdetail(item) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?type=1&id=' + item
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search{
		background-color: #FFFFFF;
		&-list_array{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-top: 20upx;
			text{
				padding: 17upx 40upx;
				background-color: #FFFFFF;
				text-align: center;
				box-sizing: border-box;
				border-radius: 40upx;
				font-size: 26upx;
				color: #333333;
				margin-top: 20upx;
				margin-bottom: 20upx;
				margin-right: 20upx;
			}
		}
		&-list_del{
			width:30upx;
			height: 30upx;
		}
		&-list_img{
			display: flex;
			align-items: center;
			font-size: 30upx;
			color: #999999;
			image{
				width: 30upx;
				height: 30upx;
				display: block;
				margin-right: 10upx;
			}
		}
		&-list_all{
			margin:20upx 0;
			padding: 0 30upx;
			box-sizing: border-box;
		}
		&-list_history{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		&-list{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		&-list_text{
			font-size: 26upx;
			color: #999999;
			padding: 24upx 0;
			border-bottom: 2upx solid #F9F9F9;
			box-sizing: border-box;
		}
		&-content{
			position: relative;
			// background-color: #FFFFFF;
		}
	   &-input{
	   	display: flex;
	   	align-items: center;
	   	padding: 0 30upx;
	   	justify-content: space-between;
	   }
	   &-close{
	   	font-size: 30upx;
	   	color: #666666;
	   }
	   &-input_input{
	   	font-size: 28upx;
	   	color: #333333;
	   	width: 80%;
	   }
	   &-cart{
		   width: 44upx;
		   height: 44upx;
		   background-image: url('https://jy-shops.oss-cn-beijing.aliyuncs.com/client/image/add_images/cart-sc.png');
		   background-size: cover;
		   position: relative;
		   text{
			  width: auto;
			  height:26upx;
			  line-height:26upx;
			  // border-radius: 16upx;
			  min-width:26upx;
			  padding: 0 1px;
			  font-size: 12px;
			  text-align: center;
			  white-space: nowrap;
			  position: absolute;
			  top: 0;
			  right: 0;
			  border-radius: 50%;
			  background-color: #f43530;
			  color: #fff;
			  -webkit-transform: translate(40%,-20%);
			  transform: translate(40%,-20%);
		   }
	   }
	   &-flex{
	   	display: flex;
	   	align-items: center;
	   	justify-content: space-between;
	   	margin: 20upx 0;
	   	padding: 0 30upx;
	   	width:89%;
	   	height:60upx;
	   	background:rgba(249,249,249,1);
	   	border-radius:30upx;
	   }
	   .error_icon{
	   	color: #D1D1D1;
	   }	
	}
	.product-Con{
		
	}
	.volume {
		font-size: 20upx;
		color: #999;
		margin: 10upx 0 25upx 0;
	}
	.volume-font{
		padding: 8upx 17upx;
		box-sizing: border-box;
		background:rgba(255,40,66,0.04);
		width: auto;
		height: auto;
		float: left;
		border-radius:4upx;
		color: #FF2842;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width:25upx;
			height: 25upx;
			margin-right:10upx;
		}
	}
	.p-box {
		display: flex;
		flex-direction: column;
margin-left: 10upx;
		image{
			width:15upx;
			height: 23upx;
		}
		.icon-shang {
			display: inline-block;
			width: 10upx;
			height: 10upx;
			margin-left: 10upx;
			border-top: 2upx solid #888;
			border-left: 2upx solid #888;
			transform: rotate(45deg);

			&.active {
				border-top: 2upx solid red;
				border-left: 2upx solid red;
			}
		}

		.xia {
			transform: rotate(-135deg);
		}
	}

	.search {


		.btn {
			width: 80upx;
			height: 60upx;
			border-radius: 10upx;
			background-color: #f83e2f;
			color: #F1F1F1;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-left: 20upx;
		}

		.classify {
			width: 80upx;
			height: 60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				font-size: 24upx;
				color: #c2c2c2;
			}

			.classify_item {
				font-size: 24upx;
				color: #c2c2c2;
				line-height: 24upx;
			}
		}
	}

	.nav {
		width: 100%;
		height: 84upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20upx;
		background-color: #FFFFFF;

		.nav_item {
			flex: 1;
			height: 32upx;
			font-size: 28upx;
			color: #333333;
			text-align: center;
			line-height: 32upx;
			display: flex;
			align-items: center;
			justify-content: center;

			// image {
			// 	width: 28upx;
			// 	height: 28upx;
			// 	margin-left: 8upx;
			// 	vertical-align: middle;
			// }
		}

		.nav_item_item {
			color: #FF2842;
		}
	}

	.product {
		background-color: #FFFFFF;
		padding: 0 15upx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pic {
			width: 180upx;
			height: 180upx;
			margin-right: 20upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			flex: 1;
			position: relative;
			padding: 20upx 0;
			box-sizing: border-box;
			border-bottom: 2upx solid #f0f0f0;

			.info_tilte {
				font-size: 28upx;
				color: #333333;
				overflow: hidden;/*超出部分隐藏*/
				white-space: nowrap;/*不换行*/
				text-overflow:ellipsis;/*超出部分文字以...显示*/
			}

			.desc {
				font-size: 24upx;
				color: #666;
				line-height: 32upx;
			}

			.price {
				margin-top: 20upx;

				.price_now {
					font-size: 28upx;
					color: #f73e2f;
					line-height: 40upx;
					font-weight: bold;
					&::before{
						content: "￥";
						display: inline-block;
						font-size: 20upx;
						font-weight: 500;
					}
				}

				.price_line {
					font-size: 18upx;
					color: #999;
					line-height: 40upx;
					text-decoration: line-through;
					margin-left: 10upx;
				}
			}

			.addcart {
				position: absolute;
				bottom: 15upx;
				right: 0;
				width: 44upx;
				height: 44upx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.add_delet {
				position: absolute;
				bottom: 20upx;
				right: 0;

				.delet {
					text-align: right;

					.icon {
						font-size: 28upx;
						color: #999999;
					}
				}

				.add {
					.icon {
						font-size: 28upx;
						color: #999999;
					}

					text {
						font-size: 28upx;
						margin: 0 10upx;
					}
				}
			}
		}

	}

	.list:last-child .info {
		border-bottom: none;
	}

	.navigation {
		height:100vh;
		.all-one{
			font-size: 30upx;
			color: #333333;
			font-weight: bold;
			border-bottom: 2upx solid #F9F9F9;
			padding: 40upx 0 40upx 24upx;
			display: block;
		}
		.all-two{
			font-size: 24upx;
			display: block;
			color: #666666;
			padding: 30upx 0 30upx 24upx;
		}
		.draw_navigation-all{
			
		}
		.draw_navigation-li{
			margin-top: 30upx;
		}
	}
	.draw_navigation {
		.draw_navigation_one {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			font-size: 32upx;
			color: #000000;
			padding-left: 30upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #E1E1E1;
			font-weight: 400;
		}

		.navigation_i {
			color: #f73e2f;
		}

		.draw_navigation_two {
			padding-left: 30upx;
			padding-top: 20upx;
			box-sizing: border-box;

			.draw_navigation_two_item {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}

			.navigation_i {
				color: #f73e2f;
			}
		}
	}
</style>
